import React, { useState, useEffect } from 'react'

export default function App() {
  // #1
  const [pos, setPos] = useState({
    x: 0,
    y: 0,
  })
  useEffect(() => {
    // #2
    document.onmousemove = function (e) {
      setPos({
        x: e.pageX,
        y: e.pageY,
      })
    }
    // #4
    return () => {
      document.onmousemove = null
    }
  }, [])
  return (
    <div>
      {/* #3 */}
      <div
        style={{
          width: 100,
          height: 100,
          position: 'absolute',
          top: pos.y,
          left: pos.x,
          backgroundColor: 'pink',
          borderRadius: '50%',
        }}
      ></div>
    </div>
  )
}
